<template>
  <div class="state-custom-result">
    <el-row >
      <el-col
        :span="24"
        v-loading="loading">
        <ve-line
          :data="chartData"
          :settings="chartSettings"
          :extend="chartExtend"
          :grid="chartGrid"
          :toolbox="toolbox"
          :loading="loading"
          :data-empty="dataList.length<=0"/>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          :data="dataList"
          border
          height="45vh">
          <component
            :is="'el-table-column'"
            :prop="item.prop"
            :label="item.label"
            :header-align="'center'"
            :align="'center'"
            v-for="item in tableColumns"
            :key="item.prop"
          />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { MACHINE_STATE_MONITOR_TYPE } from '@/utils/constant'
import 'v-charts/lib/style.css'
export default {
  name: 'StateCustomResult',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: 0
    },
    dataList: {
      type: Array,
      default: null
    },
    total: {
      type: Number,
      default: 0
    },
    params: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      dataEmpty: true,
      chartData: {
        columns: [],
        rows: []
      },
      toolbox: {
        feature: {
          magicType: { type: ['line', 'bar'] },
          saveAsImage: {}
        }
      }
    }
  },
  computed: {
    chartExtend () {
      return {
        series: {
          label: {
            normal: {
              // show: true,
              position: 'top'
            }
          }
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              // color: 'rgba(255,255,255, .6)'
            }
          }
        },
        yAxis: {
          // splitLine: false,
          axisLine: {
            show: true,
            lineStyle: {
              // color: 'rgba(255,255,255, .6)'
            }
          }
        }
      }
    },

    chartGrid () {
      // 图表容器样式
      return {
        show: true,
        // top: 50,
        // left: 10,
        // backgroundColor: '#fff',
        borderColor: '#ffffff'
      }
    },
    chartSettings () {
      if (this.type === MACHINE_STATE_MONITOR_TYPE.API) {
        return {
          // yAxisType: [''],
          yAxisName: ['响应时间'],
          min: [0],
          max: [2000],
          itemStyle: {
            color: '#409EFF'
          },
          labelMap: {
            cpu: 'CPU',
            memory: '内存',
            disk: '硬盘',
            api_response: '接口响应时间'
          }
        }
      }
      return {
        yAxisType: ['percent'],
        yAxisName: ['比例'],
        min: [0],
        max: [1],
        itemStyle: {
          color: '#409EFF'
        },
        showLine: true,
        labelMap: {
          cpu: 'CPU',
          memory: '内存',
          disk: '硬盘',
          api_response: '接口响应时间'
        }

      }
    },
    tableColumns () {
      switch (this.type) {
        case MACHINE_STATE_MONITOR_TYPE.CPU:
          return [
            // {
            //   prop: 'ip',
            //   label: this.$t('state.ip')
            // },
            {
              prop: 'free_percent',
              label: this.$t('state.cpu.free')
            },
            {
              prop: 'used_percent',
              label: this.$t('state.cpu.used')
            },
            {
              prop: 'timestamp',
              label: this.$t('state.timestamp')
            }
          ]
        case MACHINE_STATE_MONITOR_TYPE.MEMORY:
          return [
            // {
            //   prop: 'ip',
            //   label: this.$t('state.ip')
            // },
            {
              prop: 'used_percent',
              label: this.$t('state.memory.actual_use_percent')
            },
            {
              prop: 'used',
              label: this.$t('state.memory.actual_used')
            },
            {
              prop: 'free',
              label: this.$t('state.memory.actual_free')
            },
            {
              prop: 'timestamp',
              label: this.$t('state.timestamp')
            }
          ]
        case MACHINE_STATE_MONITOR_TYPE.DISK:
          return [
            // {
            //   prop: 'ip',
            //   label: this.$t('state.ip')
            // },
            {
              prop: 'free_name',
              label: this.$t('state.disk.free')
            },
            {
              prop: 'used_name',
              label: this.$t('state.disk.used')
            },
            {
              prop: 'used_percent_name',
              label: this.$t('state.disk.used_percent')
            },
            {
              prop: 'timestamp',
              label: this.$t('state.timestamp')
            }
          ]
        case MACHINE_STATE_MONITOR_TYPE.API:
          return [
            // {
            //   prop: 'ip',
            //   label: this.$t('state.ip')
            // },
            {
              prop: 'responseTime',
              label: this.$t('state.api.response_time')
            },
            {
              prop: 'timestamp',
              label: this.$t('state.timestamp')
            }
          ]
      }
    }
  },
  watch: {
    dataList (newValue, oldValue) {
      // memory

      switch (this.type) {
        case MACHINE_STATE_MONITOR_TYPE.CPU:
          this.chartData.columns = ['time', 'cpu']
          this.chartData.rows = this.dataList.map(item => {
            return {
              time: item.timestamp,
              cpu: item.systemCpuTotalNormPct
            }
          })
          break

        case MACHINE_STATE_MONITOR_TYPE.DISK:
          this.chartData.columns = ['time', 'disk']
          this.chartData.rows = this.dataList.map(item => {
            return {
              time: item.timestamp,
              disk: item.usedPct
            }
          })
          break
        case MACHINE_STATE_MONITOR_TYPE.MEMORY:
          this.chartData.columns = ['time', 'memory']
          this.chartData.rows = this.dataList.map(item => {
            return {
              time: item.timestamp,
              memory: item.actualUsedPct
            }
          })
          break
        case MACHINE_STATE_MONITOR_TYPE.API:
          this.chartData.columns = ['time', 'api_response']
          this.chartData.rows = this.dataList.map(item => {
            return {
              time: item.timestamp,
              api_response: item.responseTime
            }
          })
          break
      }
    }
  }
}
</script>

<style scoped lang="scss">
.state-custom-result {
}
</style>
